import React from 'react';
import {Button, Form, Input, message, Modal, Table, Tag} from "antd";
import {initConfig} from "@/config";
import {DeleteOutlined} from "@ant-design/icons";
import {apiInfoApi} from "@/api/code";

interface ApiModalProps {
    visible: boolean;
    onCancel: () => void;
    onSubmit: (apiInfoList: any[]) => void;
}

const ApiModalProps: React.FC = ({visible, onCancel, onSubmit}: ApiModalProps) => {
    const [form] = Form.useForm();
    const [apiInfoList, setApiInfoList] = React.useState([])

    const handleFinish = () => {
        onSubmit(apiInfoList)
    }

    const handleApiInfo = async () => {
        const data = form.getFieldsValue()
        try {
            const res = await apiInfoApi({...data});
            if (res.code === 0) {
                await setApiInfoList(res.data);
            } else {
                message.error(res.message);
            }
        } catch (e) {
        } finally {
        }
    }

    const handleRemoveField = (index: number) => {
        const newList = apiInfoList.filter((_, i) => i !== index);
        setApiInfoList(newList);
    };

    const columns = [
        {
            title: '接口路径',
            dataIndex: 'path',
        },
        {
            title: '请求方式',
            dataIndex: 'method',
            width: 100,
            render: (text: string, record: any) => {
                const getMethodColor = (method: string): string => {
                    switch (method) {
                        case 'get':
                            return 'blue';
                        case 'post':
                            return 'green';
                        case 'put':
                            return 'orange';
                        case 'delete':
                            return 'red';
                        default:
                            return 'default';
                    }
                };

                return (
                    <Tag color={getMethodColor(text)}>{text}</Tag>
                );
            },
            // 过滤方法
            filters: [
                {
                    text: 'get',
                    value: 'get',
                },
                {
                    text: 'post',
                    value: 'post',
                },
                {
                    text: 'put',
                    value: 'put',
                },
                {
                    text: 'delete',
                    value: 'delete',
                },
            ],
            onFilter: (value: string, record: any) => record.method === value,
        },
        {
            title: '接口名称',
            dataIndex: 'name',
        },
        {
            title: '接口描述',
            dataIndex: 'description',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_, __, index: number) => (
                <Button type="link" icon={<DeleteOutlined/>} onClick={() => handleRemoveField(index)}>
                    删除
                </Button>
            ),
        },
    ];

    return (
        <div>
            <Modal
                visible={visible}
                title="接口读取"
                width={1500}
                onCancel={onCancel}
                footer={[
                    <Button key="cancel" onClick={onCancel}>
                        取消
                    </Button>,
                    <Button key="submit" onClick={handleApiInfo}>
                        生成接口
                    </Button>,
                    <Button key="submit" type="primary" onClick={handleFinish}>
                        确认
                    </Button>,
                ]}
            >
                <Form style={{padding: '20px 0px'}} form={form} initialValues={initConfig} layout={"inline"}>
                    <Form.Item name="apiUrl" label="openApi地址">
                        <Input style={{width: 500}}/>
                    </Form.Item>
                    <Form.Item name="baseUrl" label="接口前缀">
                        <Input/>
                    </Form.Item>
                    <Form.Item name="requestMapping" label="过滤请求路径">
                        <Input style={{width: 300}}/>
                    </Form.Item>
                </Form>

                <Table
                    columns={columns}
                    dataSource={apiInfoList}
                    pagination={false}
                    rowKey={(record, index) => index.toString()}
                    scroll={{y: 600}}
                />
            </Modal>
        </div>
    )
};


export default ApiModalProps;